<template>
	<view class="page day">
    <u-notice-bar mode="horizontal" :list="notice"></u-notice-bar>
    <div class="page-content">
      <div class="day-card">
       <u-section title="月出勤数据" :right="false" :font-size="32" color="rgb(254, 129, 5)"></u-section>
       <div class="rank-top">
         <div class="rank-top-cell">
           <div class="rank-top-cell-value">{{ total.days }}天</div>
           <div class="nickname">出勤</div>
         </div>
         <div class="rank-top-cell">
           <div class="rank-top-cell-value">{{ total.fishDays }}天</div>
           <div class="nickname">中鱼</div>
         </div>
         <div class="rank-top-cell">
           <div class="rank-top-cell-value">{{ total.turtleDays }}天</div>
           <div class="nickname">打龟</div>
         </div>
       </div>

     </div>
      <div class="day-card">
        <uni-calendar
            :selected="info.selected"
            class="uni-calendar--hook"
            :showMonth="false"
            @change="change"
            @monthSwitch="monthSwitch" />
      </div>
    </div>
    <Tabbar :current="3"/>

  </view>
</template>

<script>
  /**
   * 获取任意时间
   */
  function getDate(date, AddDayCount = 0) {
    if (!date) {
      date = new Date()
    }
    if (typeof date !== 'object') {
      date = date.replace(/-/g, '/')
    }
    const dd = new Date(date)

    dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

    const y = dd.getFullYear()
    const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
    const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
    return {
      fullDate: y + '-' + m + '-' + d,
      year: y,
      month: m,
      date: d,
      day: dd.getDay()
    }
  }
  import Tabbar from '@/components/tabbar.vue'
  export default {
    components: {
      Tabbar
    },
		data() {
			return {
        notice:[ '记录打鱼生活'],
        info: {
          lunar: false,
          range: false,
          insert: false,
          selected: []
        },
        total: {
          days: 0,
          fishDays: 0,
          turtleDays: 0
        }
			}
		},
    onShow() {
      this.getDayData({
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1
      })

    },
		methods: {
      change(e) {
        console.log('change',e)
        if(e.extraInfo && e.extraInfo.data && e.extraInfo.data.id) {
          uni.navigateTo({
            url: `/pages/day/fish?date=${e.fulldate}`
          })
        }
      },
      monthSwitch(e) {
        console.log(e)
        this.getDayData(e)
      },
      getDayData(date) {
        let year = date.year
        let month = date.month < 10 ? '0' + date.month : date.month
        if (!this.$store.state.userInfo.id) {
          return
        }
        this.$api.getAttendance({
          member_id: this.$store.state.userInfo.id,
          date: `${year}-${month}`
        }).then(res => {
          console.log(res)
          this.total = {
            days: res.days,
            fishDays: res.fishDays,
            turtleDays: res.turtleDays
          }
          this.info.selected = [
              ...res.fishList,
              ...res.turtleList
          ]
        })
      }
		}
	}
</script>

<style lang="scss">
.day {
  .page-content {
    padding: 20rpx;
  }
  .day-card {
    background-color: #ffffff;
    border-radius: 14rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    .rank-top {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #F6F6F6;
      padding-bottom: 20rpx;
      .rank-top-cell {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .rank-top-cell-value {
          height: 72rpx;
          font-size: 32rpx;
          color: 333333;
          line-height: 72rpx;
        }
        .nickname {
          font-size: 24rpx;
          color: #333333;
        }
      }
    }
  }
}
</style>
